<template>
  <el-col :span='props.span' :style='styles[props.index%2]'>
    <el-form-item :label='props.title' label-position='right' size='large'>
          <textarea v-model='text'
                    @focus='insertText'
                    @input='insertText'
                    @click='insertText'
                    @focusout='submitForm'
                    :id="'textArea'+props.index"
                    :style='{height:props.textHeight}'></textarea>
    </el-form-item>
  </el-col>

</template>

<script lang='ts' setup>
import { ref, reactive, computed, watch } from 'vue';
import { IsEmpty } from '@/utils/common';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import request from '@/api';

let selectionStart = 0;
let selectionEnd = 0;
let text = ref('默认');
const props = defineProps({
  // textHeight: { type: String, default: '30px' },
  // title: { type: String, default: '项目名称' },
  // valueText: { type: String, default: '默认' },
  // index: { type: Number, default: 0 },
  // span: { type: Number, default: 24 },
  rptMaininfo: { type: Objcect, default: {} },
  item: { type: Objcect, default: {} },
});
const styles = reactive([
  { backgroundColor: '#f3f2f2', color: '#ffffff' },
  { backgroundColor: '#ffffff', color: '#333333' }
]);
// 监听 message 的变化
watch(() => props.valueText, (newValueText, oldValueText) => {
  text.value = newValueText;
});
const insertText = (event) => {
  const textarea = event.target;
  selectionStart = textarea.selectionStart;
  selectionEnd = textarea.selectionEnd;
};

//讲模板插入光标位置
const insertAtCursor = (row: any, column: any) => {
  let insertText = row.content;
  //'textArea'+index
  const textarea = document.getElementById('textarea'+props.index);
  const before = text.value.substring(0, selectionStart);
  const after = text.value.substring(selectionEnd, text.value.length);

  text.value = before + insertText + after;

  // 更新光标位置
  setTimeout(() => {
    textarea.focus();
    textarea.setSelectionRange(selectionStart + insertText.length, selectionStart + insertText.length);
  }, 0);
};

// 保存
const submitForm = () => {

  let labRptresult = {
    id: "",
    sampleda: props.rptMaininfo.sampleda,
    rptGroup: props.rptMaininfo.rptGroup,
    sampleNo: props.rptMaininfo.sampleNo,
    maininfoId: props.rptMaininfo.id,
    itemNo: props.item.itemNo,
    itemNa: props.item.itemNa,
    itemDictId: props.item.id,
    rptResult: '',
    ref: '',
    seq: '',
    displayOrder: props.item.seq
  };
    //新增检查项目
    const postUrl = '/lab/rptResult/insertRptResult';

    let res=request({
      url: postUrl,
      method: 'post',
      data: labRptresult
    });
    res.status.code === 1 ? VxeMessage(res.status.msg, VxeNotifyType.success) : VxeMessage(res.status.msg, VxeNotifyType.error);

};
</script>

<style scoped>
/* 添加一些样式 */
textarea {
  width: 100%;
  height: 100px;
  position: relative;
  display: block;
  resize: vertical;
  padding: 5px 11px;
  line-height: 1.5;
  box-sizing: border-box;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
  color: #606266;
  background-color: #ffffff;
  background-image: none;
  -webkit-appearance: none;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 4px;
  border: none;
  overflow: hidden;
}

.el-col {
  border-radius: 4px;
  padding-left: 5px;
}
</style>
